<template>
  <div>
    <!-- 头部标题 -->
    <van-nav-bar title="登录" />
    <!-- 输入框 -->
    <van-cell-group>
      <van-field :error-message="msg.phone" left-icon="fire-o" v-model="obj.phone" placeholder="请输入手机号">
        <template #left-icon>
          <i class="iconfont icon-shoujihao"></i>
        </template>
      </van-field>
      <van-field :error-message="msg.code" left-icon="smile-o" v-model="obj.code" placeholder="请输入验证码">
        <template #button>
          <van-button class="codeBtn" round color="#ededed" size="small" type="primary">发送验证码</van-button>
        </template>
        <template #left-icon>
          <i class="iconfont icon-lock"></i>
        </template>
      </van-field>
    </van-cell-group>
    <!-- 登录按钮 -->
    <div class="boxbtn">
      <van-button size="large" :loading="isLoading" @click="login" type="info">登录</van-button>
    </div>
    <!-- <i class="iconfont icon-shoujihao"></i><i class="iconfont icon-lock"></i> -->
  </div>
</template>

<script>
// 导入操作用户的方法
import { apiLogin } from '../../api/user'
export default {
  data () {
    return {
      // 管理用户信息
      obj: {
        phone: '18611111111', // 手机号
        code: '246810' // 验证码
      },
      msg: {
        phone: '', // 手机号的提示信息
        code: '' // 验证码的提示信息
      },
      // 设置按钮的加载状态
      isLoading: false
    }
  },
  methods: {
    // 完成登录验证
    async login () {
      // 将按钮设置为加载状态：
      this.isLoading = true
      if (this.checkData()) {
        try {
          let res = await apiLogin({
            mobile: this.obj.phone,
            code: this.obj.code
          })
          // 将服务器返回的用户信息保存到 vuex 中 & 也保存到了本地 localstage 中
          this.$store.commit('setUserInfo', res.data.data)
          // 得到当前请求的路由
          var path = this.$route.path
          // 判断 path
          if (path === '/login') {
            // 如果 path 是 Login 就跳转到首页
            this.$router.push('/index')
          } else {
            // 如果 path 是 checklogin 就跳转到上一个页面
            this.$router.back()
          }
          // 跳转到首页
          // this.$router.push('/index')
          // 跳转回上一个页面
          // this.$router.back()
        } catch {
          // 提示失败信息
          this.$toast.fail('登录失败')
        }
      } else {
        window.console.log('验证不通过')
      }
      // 将按钮设置为加载完毕状态
      this.isLoading = false
    },
    // 封装验证参数的逻辑
    checkData () {
      // 判断：判断参数是否合法：
      //  如果合法，就直接执行后续的逻辑
      //  如果不合法，就直接提示错误信息
      // 定义一个用来进行参数合法性验证的数组：
      var checkArr = []
      // 1.0 验证手机号
      if (this.obj.phone.length !== 11) {
        // 说明手机号验证不合法
        this.msg.phone = '手机号长度不合法'
        checkArr.push(false)
      } else {
        // 说明手机号验证合法
        this.msg.phone = ''
        checkArr.push(true)
      }
      // 2.0 验证码是否正确
      if (this.obj.code.length !== 6) {
        // 说明验证码不合法
        this.msg.code = '验证码不合法'
        checkArr.push(false)
      } else {
        this.msg.code = ''
        checkArr.push(true)
      }
      // 判断验证是否通过: checkArr 如果都为 true 说明验证通过。只要有一个 false 说明不通过
      if (!checkArr.includes(false)) {
        // 如果不包括 false, 说明验证通过
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="less">
.van-nav-bar.van-hairline--bottom {
  background-color: #3e9df8;
  .van-nav-bar__title {
    color: #fff;
  }
}

.codeBtn span.van-button__text {
  color: #999;
}

.boxbtn {
  margin: 30px 20px;
}
</style>
